import React, { useEffect, useState } from 'react';
import {
    LarkMap,
    LayerPopup,
    LineLayer,
    PolygonLayer
} from '@antv/larkmap';
import { coordAll, featureCollection, lineString } from '@turf/turf';
import {GaodeMap} from "@antv/l7";
import AMapLoader from '@amap/amap-jsapi-loader';


const MyComponent = () => {
    const polygonLayerOptions = {
        autoFit: true,
        shape: 'fill',
        color: {
            field: 'adcode',
            value: ['rgba(15,153,148,0.48)',  'rgba(135,72,232,0.57)','rgba(94,253,223,0.47)'],
        },
        state: {
            active: true,
        },
        style: {
            opacity: 0.6,
        },
    };

    const lineLayerOptions = {
        shape: 'line',
        color: '#fff',
        size: 1,
    };

    const items = [
        {
            layer: 'myPolygonLayer',
            fields: [
                {
                    field: 'name',
                    formatField: () => '名称',
                },
                {
                    field: 'adcode',
                    formatField: '楼号',
                },
            ],
            title: () => '寝室楼信息',
        },
        {
            layer: 'myLineLayer',
            title: '线图层',
            customContent: (feature) => {
                return (
                    <p style={{ color: 'red' }}>
                        {feature.properties.name} {feature.properties.adcode}
                    </p>
                );
            },
        },
    ];

    const [polygonSource, setPolygonSource] = useState({
        data: { type: 'FeatureCollection', features: [] },
    });
    const getMapInstance = () => {
        return AMapLoader.load({
            key: '9f5e4e208d8eb578f0edee3bd1b6360c',
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            return new GaodeMap({
                mapInstance: new AMap.Map('container', {
                    zoom: 10, //初始化地图层级
                    center: [124.363912,40.177703], //初始化地图中心点
                }),
            });
        });
    };

    const [lineSource, setLineSource] = useState({
        data: { type: 'FeatureCollection', features: [] },
    });

    useEffect(() => {
        fetch('http://localhost:8850/builder/getMaplist')
            .then((response) => response.json())
            .then((data) => {
                console.log("text")
                console.log(data)
                setPolygonSource({ data });
                setLineSource({
                    data: featureCollection(
                        data.features.map((item) => lineString(coordAll(item), item))
                    ),
                });
            });
    }, []);

    return (
        <div style={{height:'400px',width:'100%'}}>
            <LarkMap id="container" map={getMapInstance} mapType="Gaode" style={{ height: '400px' }}>
                <PolygonLayer {...polygonLayerOptions} source={polygonSource} id="myPolygonLayer" />
                <LineLayer {...lineLayerOptions} source={lineSource} id="myLineLayer" />
                <LayerPopup  closeButton={false} closeOnClick={false} anchor="bottom-left" trigger="hover" items={items} />
            </LarkMap>
        </div>

    );
};

export default MyComponent;
